<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./css/register.css">
 
</head>
<body>
    <form action="index.html" method="post"
        id="fm" name="fm" onsubmit="return checkfrom()">
        <div>
            <label for="user">用户名：</label>
            <input type="text" id="user" name="user" class="input">
            <span class="error">用户名应为6-14位</span>
        </div>
        <div>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" name="pwd" class="input">
            <span class="error" >密码应为8-16位</span>
        </div>
        <div>
            <label for="pwd2">重复密码：</label>
            <input type="password" id="pwd2" name="pwd2" class="input">
            <span class="error">两次输入的密码应相同</span> 
        </div>
        <div>
            <input type="submit" value="确定注册" id="sub">
           <button> <a href="wo.html">return back</a></button>
        </div>
    </form>

    <script>
        //先做DOM,document object model
        var user=document.getElementById("user"); 
        var error=document.getElementsByClassName("error");//类数组

        //onchange:onblur,失去焦点，onfocus,得到焦点
        user.onchange=checkuser;//写复用函数
        function checkuser(){
            if(user.value.length>6&&user.value.length<14){
                error[0].style.display="none";
                return 1;
            }
            else {
                error[0].style.display="block";
                return 0;
            }
        }

        pwd.onchange=checkpwd;
        function checkpwd(){
            if(pwd.value.length>8&&pwd.value.length<16){
                error[1].style.display="none";
                return 1;
            }
            else {
                error[1].style.display="block";
                return 0;
            }
        }

        pwd2.onchange=checkpwd2;
        function checkpwd2(){
            if(pwd2.value ==pwd.value){
                error[2].style.display="none";
                return 1;
            }
            else {
                error[2].style.display="block";
                return 0;
            }
        }

        function checkform()
        {
            var rs=checkuser()*checkpwd()*checkpwd2();
            if(rs==0){
                return false;
            }
            else{
                return true;
            }
        }
    </script>
</body>
</html>